<template>
    <div class="container">
<!--        导入包裹-->
        <div class="items-main" @click="importPackage">
            <div class="itemsOne">
                <span class="iconfont">&#xe60e;</span>
                <div class="itemsName">导入包裹</div>
            </div>
            <div class="itemsTwo">
                <div class="extraIntroduce">绑定手机管理更多包裹</div>
                <span class="iconfont">&#xe799;</span>
            </div>
        </div>
        <!--            会员中心+果酱积分-->
        <div class="specialTips">
            <div class="vip" @click="vipCenter">
                <div class="vip-icon-main">
                    <span class="iconfont">&#xe605;</span>
                </div>
                <div class="vip-title">
                    <div class="vip-title-center">会员中心</div>
                    <div class="vip-title-sale">限时特价</div>
                </div>
                <div class="vip-icon-to">
                    <span class="iconfont">&#xe799;</span>
                </div>
            </div>
            <div class="lines"></div>
            <div class="guojiangScore" @click="scoreGuo">
                <div class="vip-icon-main">
                    <span class="iconfont">&#xe636;</span>
                </div>
                <div class="vip-title">
                    <div class="vip-title-center">裹酱积分</div>
                    <div class="vip-title-sale">签到领礼包</div>
                </div>
                <div class="vip-icon-to">
                    <span class="iconfont">&#xe799;</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "specialitems",
    methods:{
        importPackage(){
            this.$router.push('/importPackage');
        },
        vipCenter(){
            this.$router.push('/vip');
        },
        scoreGuo(){
            this.$router.push('/integral');
        }
    }
}
</script>

<style lang="scss" scoped>
/*引入图标*/
@import "../../assets/userIconFont/iconfont.css";
    .container{
        padding-bottom: 150px;
        .specialTips{
            display: flex;
            background-color: white;
            margin: -230px 20px 0 20px;
            justify-content: center;
            align-items: center;
            border-radius: 20px;
            box-shadow:0px 10px 5px #eeecec;
            .vip,.guojiangScore{
                margin: 20px;
                display: flex;
                align-items: center;
                &-icon-main{
                    margin-right: 20px;
                    span{
                        font-size: 50px;
                        color: gold;
                    }
                }
                &-title{
                    margin-right: 70px;
                    &-center{
                        font-size: 30px;
                    }
                    &-sale{
                        font-size: 10px;
                        color:#ff6700 ;
                    }
                }
                &-icon-to{
                    transform: rotate(180deg);
                    span{
                        font-size: 10px;
                        color: #8590a6;
                    }
                }
            }
            .lines{
                width: 1px;
                height: 80px;
                background-color: #e3d7d7;
            }
        }
        .items-main{
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: white;
            padding: 100px 30px 20px 30px;
            .itemsOne{
                display: flex;
                justify-content: center;
                align-items: center;
                span{
                    color: #2f8cff;
                    font-size: 30px;
                    margin-right: 20px;
                }
                .itemsName{
                    font-size: 30px;
                }
            }
            .itemsTwo{
                display: flex;
                justify-content: center;
                align-items: center;
                .extraIntroduce{
                    color: #c8c8d7;
                    font-size: 10px;
                    margin-right: 20px;
                }
                span{
                    transform: rotate(180deg);
                    color: #8590a6;
                }
            }
        }
    }
</style>